globals = {
    current_index: 0,
    last_index:0,
    slide_cnt: 0,
    win_height: 1024,
    win_width: 700,
}
mkb = {
/* -- functions -- */
go_next: 
    function() {
        if (globals.current_index == globals.slide_cnt - 1) return;
        globals.last_index = globals.current_index
        globals.current_index += 1;
        mkb.update_slide();
    },

go_prev:
    function (){
        if (globals.current_index == 0) return;
        globals.last_index = globals.current_index
        globals.current_index -= 1;
        mkb.update_slide();
    },

move_to:
    function(index) {
        if (index < 0 || index >= globals.slide_cnt) return;
        globals.last_index = globals.current_index
        globals.current_index = index;
        mkb.update_slide();
    },

update_slide:
    function () {
        $('#showcase').fadeOut("normal", 
            function(){
                $('#showcase').html(
                    $('.slide:eq('+globals.current_index+')').html())
            }
        );
        $('#showcase').fadeIn('normal');
        var to = globals.current_index;
        var from = globals.last_index;
        var state = 1
        $('.thumbnail').each(function(i) {
            var side = (i == to && from-to < 0 ) ||  i-to > 0 ? "left" : "right";
            var mod = i == to ? (1-state) : (i==from?state:1);
            var before = (i > from && i != to);
            $(this)
                .css(
                    'webkit-transform', 
                    'matrix(1,'+(mod * (side == 'right' ? -0.3 : 0.3))+',0,1,0,0) scale('+(1+((1-mod)*0.5))+')')
                .css('left', (
                    (-i * ($(this).width()/2))
                    + (side == "right"? -$(this).width()/2 : $(this).width()/2) * mod))
                .css('z-index', 
                    globals.slide_cnt + (side == "left" ? to-i : i-to));
            $(this).css("opacity",
                1 - Math.abs((side == "left" ? to-i : i-to)) / 12);
        })

        //Center current thumbnail
        $('#thumbnails').stop().animate({
            left: (
                (-globals.current_index * 64/2)
                + ($('#thumbnails').parent()[0].offsetWidth/2 - 64/2) 
                - (parseInt($('#thumbnails').css("paddingLeft")) || 0)
                )
            }, {
                duration: 1000,
            });
    },

resize_page:
    function () {
        var vscale = 20;  
        var hscale = 30;  
        if (window.innerHeight) {
            var vsize = window.innerHeight;
            var hsize = window.innerWidth;
        } else if (document.documentElement.clientHeight) {
            var vsize = document.documentElement.clientHeight;
            var hsize = document.documentElement.clientWidth;
        } else if (document.body.clientHeight) {
            var vsize = document.body.clientHeight;
            var hsize = document.body.clientWidth;
        } else {
            var vsize = 600;  
            var hsize = 800; 
        }
        var newSize = Math.min(Math.round(vsize/vscale),Math.round(hsize/hscale));
        $('body').css('font-size', newSize+'px');
    },

build_nav:
    function() {
        var data = $('#slide-list').html();
        data = data.replace(/class=\"slide\"/g, 'class="thumbnail"')
        data = data.replace(/<object [\d\D.]+<\/object>/g, '')
        data = data.replace(/<video [\d\D.]+<\/video>/g, '')
        $('#thumbnails').html(data)
    },
}

/* -- init -- */
jQuery(function($) {
    globals.slide_cnt = $('.slide').length;
    mkb.build_nav();
    mkb.resize_page();
    mkb.update_slide();

    /* -- event binding -- */
    $('#next').click(function(){
        mkb.go_next();    
    });
    $('#prev').click(function(){
        mkb.go_prev();              
    });
    $(window).resize(function(){
        mkb.resize_page(); 
    });
    $('#nav').hover(function(){
        $(this).css('opacity', '1');
    }, function(){
        $(this).css('opacity', '0');
    })
    $('.thumbnail').click(function(obj, event) {
        mkb.move_to($('.thumbnail').index($(this)))
    })
    /* -- hotkeys -- */
    $(window).bind("keydown", function(e) {
        // left
        switch (e.keyCode){
        case 39:  
            mkb.go_next();
            break;
        case 37:
            mkb.go_prev();
            break;
        } 
	});
});
